<script setup lang="ts">
import store from "@/store";
import { computed } from "vue";

// 当前节点
const currentNode = computed(() => {
  return store.getters.currentNode;
});

/**
 * 删除属性
 */
const deleteAttribute = (i: number) => {
  const node = currentNode.value;
  node.attribute.splice(i, 1);
};
/**
 * 新增属性
 */
const addAttribute = () => {
  const node = currentNode.value;
  node.attribute.push({
    key: "",
    value: ""
  });
};
</script>

<template>
  <div class="right-content">
    <div class="panel-title">
      <i class="fas fa-sliders-h color-secondary"></i>
      <span>节点属性</span>
    </div>
    <template v-if="currentNode.id">
      <div class="m-t-10">
        <div class="f-s-14 color-3 m-b-10">节点名称</div>
        <div class="w-full">
          <el-input v-model="currentNode.name" class="w-full" maxlength="10" placeholder="请输入节点名称" />
        </div>
      </div>
      <div class="m-t-10">
        <div class="f-s-14 color-3 m-b-10">节点类型</div>
        <div class="w-full">
          <el-input v-model="currentNode.type" class="w-full" disabled placeholder="请输入节点类型" />
        </div>
      </div>
      <div class="m-t-10">
        <div class="f-s-14 color-3 m-b-10">节点布局</div>
        <div class="w-full">
          <el-select v-model="currentNode.layout" class="w-full" placeholder="请输入节点布局">
            <el-option label="是布局节点" :value="true" />
            <el-option label="不是布局节点" :value="false" />
          </el-select>
        </div>
      </div>
      <div v-if="currentNode.layout" class="m-t-10">
        <div class="f-s-14 color-3 m-b-10">节点最大子集数</div>
        <div class="w-full">
          <el-input-number
            v-model="currentNode.childrenMax"
            :min="1"
            :max="10000"
            class="w-full"
            placeholder="请输入节点最大子集数"
          />
        </div>
      </div>
      <div class="m-t-10">
        <div class="f-s-14 color-3 m-b-10">节点图标</div>
        <div class="w-full">
          <el-input v-model="currentNode.icon" class="w-full" clearable maxlength="30" placeholder="请输入节点图标" />
        </div>
      </div>
      <div class="m-t-10">
        <div class="f-s-14 color-3 m-b-10">节点内容</div>
        <div class="w-full">
          <el-input
            v-model="currentNode.value"
            class="w-full"
            type="textarea"
            maxlength="100"
            placeholder="请输入节内容"
          />
        </div>
      </div>
      <div class="m-t-10">
        <div class="f-s-14 color-3 m-b-10">节点属性</div>
        <div class="w-full">
          <div v-for="(item, i) in currentNode.attribute" :key="i" class="flex flex-center m-b-5">
            <div class="flex1">
              <el-input v-model="item.key" class="w-full" clearable maxlength="20" placeholder="属性名" />
            </div>
            <div class="flex1 m-l-5">
              <el-input v-model="item.value" class="w-full" clearable maxlength="20" placeholder="属性值" />
            </div>
            <el-button class="m-l-10" plain circle size="small" @click="deleteAttribute(i)">
              <i class="fas fa-times"></i>
            </el-button>
          </div>
        </div>
        <el-button class="w-full m-t-10" plain @click="addAttribute">
          <div class="flex flex-center">
            <i class="fas fa-plus"></i>
            <span class="m-l-5">添加属性</span>
          </div>
        </el-button>
      </div>
    </template>
    <div v-else class="color-9 f-s-16">请选择节点</div>
  </div>
</template>
